<template>
  <div style="padding: 16px; max-width: 520px;">
    <h2 style="margin-bottom: 12px;">完善资料</h2>
    <a-alert v-if="hint" type="warning" :message="hint" show-icon style="margin-bottom:12px" />
    <a-form :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
      <a-form-item label="用户名">
        <a-input v-model:value="form.username" disabled />
      </a-form-item>
      <a-form-item label="姓名" required>
        <a-input v-model:value="form.realName" placeholder="请输入姓名" />
      </a-form-item>
      <a-form-item label="电话" required>
        <a-input v-model:value="form.tel" placeholder="请输入电话" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 6 }">
        <a-button type="primary" :loading="loading" @click="onSave">保存</a-button>
        <a-button style="margin-left: 8px;" @click="onBack">返回</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { userAPI } from '@/api/user'
import { useRouter } from 'vue-router'

const router = useRouter()
const loading = ref(false)
const hint = ref('为保证正常下单与联系，请先完善姓名与电话')

const form = ref({ id: undefined, username: '', realName: '', tel: '', status: 1 })

onMounted(() => {
  const user = JSON.parse(localStorage.getItem('userInfo') || '{}')
  form.value.id = user.id
  form.value.username = user.username
  form.value.realName = user.realName || ''
  form.value.tel = user.tel || ''
})

const onSave = async () => {
  if (!form.value.realName || !form.value.tel) {
    message.warning('请填写姓名与电话')
    return
  }
  try {
    loading.value = true
    await userAPI.updateUser({ id: form.value.id, realName: form.value.realName, tel: form.value.tel, username: form.value.username, status: 1 })
    const user = JSON.parse(localStorage.getItem('userInfo') || '{}')
    user.realName = form.value.realName
    user.tel = form.value.tel
    localStorage.setItem('userInfo', JSON.stringify(user))
    message.success('保存成功')
    router.push('/hotel/public/profile')
  } catch (e) {
    message.error('保存失败')
  } finally {
    loading.value = false
  }
}

const onBack = () => {
  router.back()
}
</script>

<style scoped>
</style>


